<template>
    <div class="wrapper">
        <mt-header title="注册" class="no-bg">
            <mt-button icon="back" slot="left" @click="$router.back(-1)"></mt-button>
            <mt-button slot="right" @click="changeToLogin">登录</mt-button>
        </mt-header>
        <div class="list">
            <div class="inputPhone">
                <mt-field placeholder="请输入手机号" type="tel"  v-model="inputValuePhone"></mt-field>
            </div>
            <div class="countdown">
                <countdown @sendValueToParent="getValueFromChild" :mobile="inputValuePhone"></countdown>
            </div>
            <div class="inputShareCode">
                <mt-field placeholder="请输入邀请码(必填)" type="text" v-model="inputValueShareCode"></mt-field>
            </div>
        </div>
        <div class="default-btn">
            <mt-button type="primary" size="large" :disabled="(inputValuePhone&&inputValueCode&&inputValueShareCode)?false:true" @click.native="register">注册</mt-button>
        </div>
    </div>
</template>

<script>
import countdown from "@/components/Countdown"
import { Toast } from 'mint-ui';
import { validatePhone } from '@/utils/validate'
import { requestRegister } from '@/api/api'
export default {
    name: 'register',
    data(){
        return {
            isShowPwd:false,
            inputValuePhone:'',
            inputValueCode:'',
            inputValueShareCode:''
        }
    },
    components:{
        countdown
    },
    methods:{
        register(){
            if( validatePhone(this.inputValuePhone) ){
                requestRegister({
                    "mobile":this.inputValuePhone,
                    "validationCode": this.inputValueCode,
                    "inviteCode":this.inputValueShareCode
                }).then(res=>{
                    if( res.code == 200 ){
                        Toast({
                            message: res.msg,
                        });
                        //跳到登录页
                        this.$router.push('/login');
                    }else{
                        Toast({
                            message: res.msg
                        });
                    }
                })
            }else{
                Toast({
                    message: '请输入正确格式的手机号',
                    className: 'innputPhoneToast'
                });
            }
        },
        getValueFromChild(value){
            this.inputValueCode = value;
        },
        changeToLogin(){   //跳转到登录页面
            this.$router.push('/login');
        }
    }
}
</script>
<style lang="stylus" scoped>
.wrapper{
    .list{
        margin-top:30px;
    }
    .tips{
        text-align:center;
        position:absolute;
        bottom:25px;
        left:0;
        width:100%;
        span{
            color:#004EA2;
        }
    }
}
</style>

